Skip to content

fix: 채팅 프로필 이미지 찌그러짐 수정#531

Merged
manNomi merged 2 commits into
mainfrom
fix/chat-profile-avatar-shrink
May 26, 2026
Merged

fix: 채팅 프로필 이미지 찌그러짐 수정#531
manNomi merged 2 commits into
mainfrom
fix/chat-profile-avatar-shrink

Conversation

@manNomi
Copy link
Copy Markdown
Contributor

@manNomi manNomi commented May 26, 2026

관련 이슈

  • resolves: 없음

작업 내용

  • 채팅 메시지에서 긴 문장이 들어올 때 상대방 프로필 이미지가 flex 레이아웃 안에서 줄어들지 않도록 ProfileWithBadgeshrink-0을 추가했습니다.
  • 채팅 말풍선 영역에 min-w-0, break-words를 보강해 긴 텍스트가 말풍선 내부에서 자연스럽게 줄바꿈되도록 수정했습니다.
  • 시간 텍스트는 shrink-0으로 고정해 말풍선과 시간/프로필 영역이 서로 압축하지 않도록 정리했습니다.

검증

  • pnpm --filter @solid-connect/web lint:check
  • pnpm --filter @solid-connect/web typecheck
  • pnpm --filter @solid-connect/web build
  • commit hook: @solid-connect/web ci:check 통과
  • push hook: @solid-connect/web ci:check@solid-connect/web build 통과

참고

  • 로컬 Node가 v23.10.0이라 engines.node: 22.x 경고가 출력되지만 검증은 모두 통과했습니다.

@manNomi manNomi requested review from enunsnv and wibaek as code owners May 26, 2026 08:37
@vercel
Copy link
Copy Markdown

vercel Bot commented May 26, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
solid-connection-web Ready Ready Preview, Comment May 26, 2026 8:45am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
solid-connect-web-admin Skipped Skipped May 26, 2026 8:45am

@github-actions github-actions Bot added the web label May 26, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 26, 2026

Review Change Stack

Warning

Review limit reached

@manNomi, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 55 minutes and 3 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: a4213044-10c6-456d-8bdc-f0fd3c3510eb

📥 Commits

Reviewing files that changed from the base of the PR and between 63d2dee and 032ccce.

📒 Files selected for processing (1)
  • apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_hooks/useChatListHandler.ts

🎯 Walkthrough

이번 변경사항은 채팅 메시지 박스의 렌더링 레이아웃을 정교하게 조정하고 프로필 배지의 flex 동작을 개선합니다.

  1. 자신의 메시지 말풍선 레이아웃 개선

    • 메시지 컨테이너가 min-w-0max-w-[min(80%,24rem)] 제약으로 변경되어 더 정확한 최대 너비 제어를 제공합니다
    • 메시지 본문 요소에 break-words 클래스가 추가되어 긴 단어가 자동으로 줄바꿈됩니다
  2. 상대 메시지 말풍선 DOM 재구성

    • 말풍선 컨테이너가 min-w-0max-w-[min(100%,28rem)]로 제약되며 레이아웃 유연성이 향상됩니다
    • 프로필·닉네임·메시지 내용·첨부파일·시간 표시의 DOM 배치 순서가 재정렬되어 시각적 흐름이 개선됩니다
    • 메시지 본문에도 break-words가 추가되어 텍스트 래핑 동작이 일관되게 개선됩니다
  3. 프로필 배지 flex 축소 방지

    • ProfileWithBadge 컴포넌트의 루트 컨테이너에 shrink-0 클래스가 추가되어 부모 flex 컨텍스트에서 크기 축소가 방지됩니다

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

  • wibaek
  • enunsnv
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목이 변경사항의 주요 목적인 '채팅 프로필 이미지 찌그러짐 수정'을 명확하게 요약하고 있습니다.
Description check ✅ Passed PR 설명이 관련 이슈, 작업 내용, 검증 과정을 포함하고 있으며 템플릿의 주요 섹션을 충실히 따르고 있습니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/chat-profile-avatar-shrink

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 63d2deeecf

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

<span className="text-k-500 typo-regular-4">{formatTime(message.createdAt)}</span>
<div className="rounded-b-xl rounded-tl-xl bg-primary px-3 py-2 text-white">
<div className="flex min-w-0 justify-end">
<div className="flex max-w-[min(80%,24rem)] min-w-0 flex-row-reverse gap-2">
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Avoid capping own-message row at 80%

max-w-[min(80%,24rem)] on the my-message container makes the bubble too narrow when an attachment image is present, because ChatImage is fixed at w-[200px] and the timestamp is also shrink-0; after subtracting timestamp/gap, the bubble can drop below 200px on common narrow layouts (e.g., ~360px mobile viewport once chat paddings are applied), causing horizontal overflow/compression that did not happen with the previous full-available-width behavior.

Useful? React with 👍 / 👎.

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 032ccce976

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment on lines +255 to +256
shouldForceScrollToBottomRef.current = true;
requestAnimationFrame(scrollToBottom);
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Clear force-scroll state when outbound send is not confirmed

Setting shouldForceScrollToBottomRef.current = true during sendTextMessage leaves a sticky force-scroll state until the message list length increases. If the publish call succeeds locally but no message is appended (e.g., transient disconnect or server-side rejection), the next unrelated incoming message will still force-jump the user to bottom even when they are intentionally reading older history. This regression is introduced by the new force-scroll path and should be reset when no corresponding message append occurs.

Useful? React with 👍 / 👎.

@manNomi manNomi merged commit cb362e6 into main May 26, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant